<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试</title>
		<style>
			body{
				margin: 0;
				padding: 0;
			}
			#main {
				height: 460px;
				width: 100%;
			}
		</style>
		<script>
		
			function add(){
				// JS
				var tabDOM = document.getElementById("tab");
				tabDOM.appendChild(createTableNode())
			}
			function createTableNode(url,name){
				// 创建新的行和列
				var tr = document.createElement("tr");
				var td = document.createElement("td");
				// 创建div
				 var div = document.createElement("div");
				 var img = document.createElement("img");
					 img.src = url
				 var span = document.createElement("span");
					 span.innerText = name 
				 div.appendChild(img)
				 div.appendChild(span)
				 // 将div添加至列中
				 td.appendChild(div)
				 //把新创建的列添加到新的行中
				 tr.appendChild(td);
				return tr;
			} 
			
			var arrs = new Array()
			
			function initData(){
				
				for(var i =0; i < 10; i++){
					// 构造数据
					var goods = {
						id: i,
						url: "img/mi10.PNG",
						name: "手机00" + i,
						price: 11.11 + i
					}
					arrs.push(goods)
				}
				console.log("构造数据方法：",JSON.stringify(arrs))
			}
			
		</script>
	</head>
	<body>
		<button onclick="add()">创建新的DOM</button>
		<button onclick="#">存储数据localstorage</button>
		<div id="main">
			<table id="tab" border="1">
				<tr>
					<td>
						<div class="">
							<img src="img/mi10.PNG" />
							<span>手机</span>
							<span>价格：$199</span>
							<button onclick="add()">添加</button>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>
